'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { 
  LayoutDashboard, 
  MapPin, 
  Users, 
  ShoppingCart 
} from 'lucide-react'

const menuItems = [
  {
    href: '/admin',
    title: '仪表盘',
    icon: LayoutDashboard
  },
  {
    href: '/admin/spots',
    title: '景点管理',
    icon: MapPin
  },
  {
    href: '/admin/users',
    title: '用户管理',
    icon: Users
  },
  {
    href: '/admin/orders',
    title: '订单管理',
    icon: ShoppingCart
  }
]

export function Sidebar() {
  const pathname = usePathname()

  return (
    <div className="w-64 bg-white shadow-sm">
      <div className="h-16 flex items-center px-6">
        <h1 className="text-xl font-bold">管理后台</h1>
      </div>
      <nav className="space-y-1 px-3 py-4">
        {menuItems.map((item) => {
          const isActive = pathname === item.href
          const Icon = item.icon
          
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`
                flex items-center px-3 py-2 rounded-md text-sm font-medium
                ${isActive 
                  ? 'bg-gray-100 text-gray-900'
                  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                }
              `}
            >
              <Icon className="h-5 w-5 mr-3" />
              {item.title}
            </Link>
          )
        })}
      </nav>
    </div>
  )
} 